<template>
	<div>
		<div class="nav">
			<div class="menu">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="1">荤菜</el-menu-item>
					<el-menu-item index="2">素菜</el-menu-item>
					<el-menu-item index="3">套餐</el-menu-item>
					<el-menu-item index="4">饮料</el-menu-item>
				</el-menu>
			</div>
			<div class="search">
				<el-input placeholder="请输入内容" v-model="search">
					<template slot="append">搜索</template>
				</el-input>
			</div>
			<div class="btn">
				<el-button type="primary" icon="el-icon-plus">添加</el-button>
				<el-button type="primary" plain>批量删除</el-button>
				<el-button type="primary" plain>批量导出</el-button>
			</div>
		</div>

		<div class="content">
			<div class="dishItem" v-for="n in 10" :key="n">
				<img src="" alt="" />
				<div>酸菜鱼</div>
				<div>
					<span>￥28.87</span>
					<el-tag type="danger" effect="dark">
						7.5折
					</el-tag>
				</div>
        <div class="operation">
          <div>编辑</div>
          <div>删除</div>
          <div>查看</div>
        </div>
			</div>
		</div>

		<div class="btm">
			<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeIndex: '1',
			search: '',
		};
	},
	methods: {},
};
</script>

<style lang="scss" scoped>
.nav {
	display: flex;
	height: 50px;
	line-height: 50px;
	.menu {
		flex: 4;
	}

	.el-menu {
		background: #f8f8f8;
	}

	.el-menu-item {
		background: #f8f8f8;
	}

	.el-menu-item.is-active {
		background: #f8f8f8;
	}

	.search {
		flex: 6;

		width: 400px;
	}

	.btn {
		flex: 4;
		margin-left: 40px;
	}
}

.content {
	.dishItem {
    display: inline-block;
    width: 160px;
    background: rgb(255, 255, 255);
    padding: 5px;
    // margin-right: 30px;
	margin: 20px 30px 20px 0;
		img {
			display: block;
			width: 150px;
			height: 150px;
			background: #409EFF;
			border-radius: 10px;
			overflow: hidden;
		}

		.el-tag {
			display: inline;
		}

    .operation{
      display: flex;
      div{
        flex:1
      }
    }
	}
}

.btm {
	text-align: center;
}
</style>
